<template>
  <div class="xj-component-header">
    <img
      v-for="(item, index) in 50"
      v-if="!isWhiteDay"
      :key="index"
      :style="{
        left: Math.random() * 1700 + 'px',
        top: Math.random() * 700 + 'px',
        width: Math.random() * 20 + 6 + 'px',
        height: auto,
      }"
      class="star"
      src="@/assets/star.png"
    />
    <img src="@/assets/favicon.png" @click="toHome" />
    <a @click="toHome">XJComponent</a>
    <button
      :class="[
        isWhiteDay ? 'topic-whiteday' : 'topic-blackday',
        'topic-button',
      ]"
      @click="changeTopic"
    >
      <span :class="isWhiteDay ? 'white-day' : 'black-day'">
        <svg
          v-show="isWhiteDay"
          t="1698573900808"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2821"
          width="200"
          height="200"
        >
          <path
            d="M473.386667 241.984a27.861333 27.861333 0 0 1-30.08-25.429333l-4.693334-56.128a27.861333 27.861333 0 0 1 55.488-4.693334l4.714667 56.149334c1.28 15.338667-10.090667 28.8-25.408 30.08zM666.752 273.557333a27.84 27.84 0 0 1-1.493333-39.36l38.314666-41.322666a27.84 27.84 0 0 1 40.832 37.866666L706.133333 272.064c-10.453333 11.285333-28.074667 11.946667-39.36 1.493333zM773.034667 415.786667a27.861333 27.861333 0 0 1 27.690666-28.010667l56.32-0.362667a27.84 27.84 0 1 1 0.362667 55.701334l-56.32 0.362666a27.861333 27.861333 0 0 1-28.053333-27.669333zM764.245333 616.810667a27.861333 27.861333 0 0 1 37.504-12.053334l50.133334 25.728a27.861333 27.861333 0 0 1-25.450667 49.557334l-50.133333-25.728a27.861333 27.861333 0 0 1-12.053334-37.504zM662.250667 729.6a27.861333 27.861333 0 0 1 36.970666 13.589333l23.68 51.136a27.861333 27.861333 0 1 1-50.56 23.381334l-23.68-51.136a27.861333 27.861333 0 0 1 13.589334-36.970667zM308.544 337.28c9.024-12.458667 6.229333-29.866667-6.250667-38.890667l-45.653333-33.024a27.861333 27.861333 0 0 0-32.64 45.141334l45.653333 33.024c12.458667 9.002667 29.866667 6.208 38.890667-6.250667zM263.509333 513.024a27.861333 27.861333 0 0 0-30.357333-25.109333l-56.106667 5.333333a27.84 27.84 0 1 0 5.290667 55.466667l56.064-5.333334a27.84 27.84 0 0 0 25.109333-30.357333zM318.677333 677.269333a27.861333 27.861333 0 0 0-38.506666-8.213333L232.896 699.733333a27.861333 27.861333 0 0 0 30.293333 46.72l47.274667-30.634666c12.906667-8.362667 16.597333-25.6 8.213333-38.506667zM480.064 760.234667a27.84 27.84 0 0 0-33.237333 21.12l-12.245334 54.997333a27.84 27.84 0 1 0 54.357334 12.096l12.245333-54.976a27.84 27.84 0 0 0-21.12-33.237333zM756.842667 499.2c0 130.773333-105.984 236.736-236.714667 236.736-130.752 0-236.736-105.984-236.736-236.714667 0-130.752 105.984-236.736 236.736-236.736 130.730667 0 236.714667 105.984 236.714667 236.736z m-236.714667 194.069333a194.069333 194.069333 0 1 0 0-388.117333 194.069333 194.069333 0 0 0 0 388.117333z"
            fill="#515151"
            p-id="1627"
          ></path>
        </svg>
        <svg
          v-show="!isWhiteDay"
          t="1698576013710"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3231"
          width="200"
          height="200"
        >
          <path
            d="M512 85.333333l10.709333 0.213334a12.288 12.288 0 0 1 9.429334 19.370666c-22.656 31.914667-36.48 53.76-41.514667 65.621334a277.333333 277.333333 0 0 0 350.250667 367.701333l11.776-4.522667c15.701333-6.528 35.370667-18.346667 59.008-35.498666A17.024 17.024 0 0 1 938.666667 512c0 9.6-0.298667 19.157333-0.938667 28.586667l-1.152 14.08-0.853333 7.68-1.706667 12.885333C903.466667 780.885333 726.144 938.666667 512 938.666667 276.352 938.666667 85.333333 747.648 85.333333 512c0-210.218667 152.064-384.938667 352.170667-420.181333l14.378667-2.261334 10.112-1.322666 7.338666-0.810667c14.037333-1.365333 28.245333-2.090667 42.666667-2.090667zM394.24 191.530667l-7.125333 2.688A341.461333 341.461333 0 0 0 512 853.333333a341.461333 341.461333 0 0 0 320.469333-223.616A362.666667 362.666667 0 0 1 394.24 191.530667z"
            fill="#ffffff"
            p-id="3232"
          ></path>
        </svg>
      </span>
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import bus from "@/utils/bus";
const router = useRouter();
let isWhiteDay = ref(
  localStorage.getItem("isWhiteDay") != null
    ? localStorage.getItem("isWhiteDay")
    : true
);
function toHome() {
  router.push("/");
}
function changeTopic() {
  localStorage.setItem("isWhiteDay", !isWhiteDay.value);
  isWhiteDay.value = !isWhiteDay.value;
  bus.emit("changeTopic", isWhiteDay.value);
}
bus.on("changeTopic", (e) => {
  isWhiteDay.value = e;
});
console.log(localStorage.getItem("isWhiteDay"));
bus.emit(
  "changeTopic",
  localStorage.getItem("isWhiteDay") != null
    ? localStorage.getItem("isWhiteDay") == "true"
    : true
);
</script>
<style lang="scss" scoped>
.star {
  position: fixed;
  cursor: pointer;
  transition: all ease 1s;
}
.star:hover {
  transform: scale(2);
}
.xj-component-header {
  height: 80px;
  top: 0;
  left: 0;
  line-height: 80px;
  z-index: 100;
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px $border solid;

  img {
    width: 50px;
    cursor: pointer;
  }
  a {
    color: #1989fa;
    padding-left: 5px;
    font-weight: bolder;
    font-size: 20px;
    cursor: pointer;
  }
}
.topic-button {
  display: block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 10px;
  z-index: 100;
  cursor: pointer;
  padding-left: 4px;
  padding-right: 4px;
  position: absolute;
  display: flex;
  align-items: center;
  transition: all 0.5s ease;
  right: 140px;
  span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease 0.5s;
    position: absolute;
  }
  .white-day {
    left: 4px;
    background-color: rgb(255, 255, 255);
  }
  .black-day {
    left: 20px;
    background-color: rgb(26, 26, 26);
  }
}
.topic-whiteday {
  border: 1px solid rgb(186, 186, 186);
  background-color: rgb(241, 241, 241);
}
.topic-blackday {
  border: 1px solid rgba(255, 255, 255);
  background-color: rgb(47, 47, 47, 0.65);
}
@media all and (max-width: 1200px) {
  .xj-component-header {
    img {
      width: 30px;
    }
    a {
      font-size: 12px;
    }
  }
}
</style>
